<template>
    <div class="express-area">
        <draw-enclosure :polygon-obj="polygonObj" @openDialog="openDialog" :edit="true"></draw-enclosure>
        <div class="express-area-table">
            <lar-table
                    :model="model"
                    canAdd="canAdd">
            </lar-table>
        </div>

    </div>
</template>

<script>
    import drawEnclosure from '../../../components/map/map-area.vue'
    export default {
        name: "index",
        components: {
            drawEnclosure
        },
        data() {
            return {
                api: 'express/area?status=1&pageSize=200&page=1',
                polygonObj: [],
                model: 'express.area',
                pageInfo: {
                    per_page: 10,
                    total: 0,
                    current_page: 1,
                }
            }
        },
        created() {
            this.getArea()
        },
        computed: {
            dataRefreshEvents() {
                return this.$store.getters.getRefreshEvents(this.model);
            },
            searchQuery() {
                let data = this.$store.getters.getPipe(this.model + '.table');
                return this.$larfree.getSearchQuery(data);
            },
            fullApi: function () {
                let query = {};
                query = Object.assign(query, this.searchQuery);
                return this.$larfree.httpQuery(query, this.api);
            }
        },
        watch: {
            dataRefreshEvents: function () {
                this.getArea();
            },
            fullApi: function () {
                this.getArea();
            }
        },
        methods: {
            openDialog(value) {
                this.$router.push('/dialog/edit/' + this.model + '/' + value);
            },

            getArea() {
                this.$http.get(this.fullApi)
                    .then((response) => {
                        this.polygonObj = response.data.data;
                    })
                    .catch((error) => {
                        console.log('区域组件', error)
                        this.$message.error('请求数据错误');
                    });
            }
        }

    }
</script>
<style scoped lang="less">
.express-area {
    .express-area-table{
        background-color: #fff;
        padding: 20px 16px;
        margin: 0 0 0 10px;
    }
}
</style>
